import $ from 'jquery'
import * as joint from 'jointjs'
import Element from './element'
import * as cc from '../util/constants'

/**
 * 聚合节点
 */
const JointAggregator = joint.shapes.basic.Aggregator = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable">' +
        `<rect class="background" width="${cc.ELEMENT_WIDTH}" height="${cc.ELEMENT_HEIGHT}" fill="none"/>` +
        // '<path class="stroke" d="M11,17H69c1.6,0,3,1.3,3,3c0,1.7-1.3,3-3,3H11c-1.6,0-3-1.3-3-3C8,18.3,9.3,17,11,17z"/>' +
        '<polygon class="shadow" points="31,10 31,11 31.9,11 31.1,10 "/>' +
        '<path class="shadow" d="M44,10h-8.9l6.9,9.3L34.3,29h1.8l7-8.7L36.1,11H45c1,0,1.8,0.2,2.5,0.6C46.8,10.5,45.6,10,44,10z"/> ' +
        '<path class="shadow" d="M48.7,13c0.1,0.3,0.3,0.6,0.3,1h1l-1-5h-0.8l0.8,4H48.7z"/> ' +
        '<path class="shadow" d="M49.9,27c0,0.3-0.1,0.6-0.3,0.9L48.9,32H44H31.9h-0.7L31,32.2V33h1.9H45h4.9l1.1-6H49.9z"/> ' +
        '<path class="stroke" d="M48.9,26c0,1.7-2.4,3-5.4,3h-9.2l7.8-9.7L35.1,10H44c2.2,0,3.6,1,4,3h1l-1-5h-4H30v2h1.1l7.7,10.2l-8.8,11V32 h1.9H44h4.9l1.1-6H48.9z"/> ' +
        '</g>',
    defaults: joint.util.deepSupplement({
        type: 'basic.Aggregator',
        attrs: {
            size: {
                width: cc.ELEMENT_WIDTH,
                height: cc.ELEMENT_HEIGHT,
            },
            ".stroke": {},
            ".shadow": {
                'opacity': 0.3
            }
        }
    }, joint.shapes.basic.Generic.prototype.defaults)
})

class Aggregator extends Element {
    constructor(...args) {
        super(...args)
        this._jointInstance = new JointAggregator(this.jointAttrs)
    }

    mixinAttr() {
        let mixin = {
            attrs: {
                '.stroke': {
                    fill: 'none',
                },
                '.shadow': {
                    fill: 'none',
                }
            }
        }
        $.extend(this.jointAttrs, mixin)
    }

    setColor(colorIndex) {
        super.setColor(colorIndex)
        let color = this.getColorFromIndex(colorIndex)
        this.jointInstance.attr('.stroke/fill', color)
        this.jointInstance.attr('.shadow/fill', color)
    }

}

export default Aggregator